<template>
	<view>
		<view class="tabs-top">
			<u-tabs :list="tabs_list" :lineWidth="tabs_config.lineWidth" :current="current"
				:activeStyle="tabs_config.activeStyle" :lineColor="tabs_config.lineColor"
				:inactiveStyle="tabs_config.inactiveStyle" @click="changeTabs">
			</u-tabs>
		</view>
		
		<view class="monitro-list">
			<view v-for="(item,index) in tabs_list[current].monitro_list" :key="index" @click="toUrl(item)">
				<view class="monitro-item u-flex" >
					<view class="monitro-icon">
						<image src="../../static/icon/monitor-icon.png" mode="widthFix"></image>
					</view>
					<view class="monitro-con">
						<view class="monitro-name u-line-1">
							{{ item.name }}
						</view>
						<view class="monitro-status u-flex">
							状态： <text class="text-status"
								:class="item.status !== 1?item.status !== 2?'text-status-lx':'text-status-gj':'text-status-zc'">{{ item.status !== 1?item.status !== 2?'离线':'告警':'正常' }}</text>
						</view>
					</view>
					<view class="monitro-num">
						<view class="amount">
							{{ item.gj_num }}
						</view>
						<view class="text-name">
							告警数量
						</view>
					</view>
				</view>
			</view>
			<view class="empty-mo " v-if="tabs_list[current].monitro_list.length  === 0">
				<u-empty mode="list"></u-empty>
			</view>
			<u-loadmore v-if="loadingType === true" :status="status" />
			
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingType:false,
				status: 'loadmore',
				empty_view: false,
				tabs_config: {
					lineWidth: 40,
					lineColor: '#0081FF', //滑块颜色
					activeStyle: {
						color: '#0081FF'
					}, //菜单选中默认样式
					inactiveStyle: {
						color: '#ffffff'
					}, //非选中颜色
				}, //tabs 配置
				current: 0, //菜单默认索引
				tabs_list: [{
					name: '总数',
					monitro_list: []
				}, {
					name: '正常',
					monitro_list: []

				}, {
					name: '告警',
					monitro_list: []

				}, {
					name: '离线',
					monitro_list: []
				}],
				// 测试-数据
				monitro_list: [{	
						name: 'M101-MDC',
						gj_num: 2, // 告警数量
						status: 2, // 0:告警，1:正常，2:离线
					},
					{
						
						icon: '',
						name: 'M102-MDC',
						gj_num: 0,
						status: 1,
					},
					{
					
						icon: '',
						name: 'M103-MDC',
						gj_num: 0,
						status: 1, 
					},
					{
						
						icon: '',
						name: 'M104-MDC',
						gj_num: 0,
						status: 1,
					},
					{
					
						icon: '',
						name: 'M105-MDC',
						gj_num: 0,
						status: 1, 
					},
					{
				
						icon: '',
						name: 'M106-MDC',
						gj_num: 0,
						status: 1, 
					},
				]

			}
		},
		onLoad() {
			// 初始化时 判断数据是否存在
			this.changeTabs({
				index: this.current
			})
			this.getMoNum()
		},
		onPullDownRefresh() {
			this.changeTabs({index: this.current})	
		},
		onReachBottom() {
			this.status = 'loading'
			this.loadingType = true;
			if(this.tabs_list[this.current].monitro_list.length >= 10){
				setTimeout(() => {
					this.getData()
				}, 1000);
			}else{
				setTimeout(() => {
					this.status = 'nomore'
				}, 1000);
			}
		
		},
		methods: {
			// 加载数据
			getData(){
				// 加载到数据的话
				// this.loadingType = false
				// 否
				this.status = 'nomore'
			},
			
			changeTabs(item) {
				this.current = item.index
				setTimeout(res => {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			//获取tabs 总数
			getMoNum() {
				this.monitro_list.map(v => {
					this.tabs_list[0].monitro_list.push(v)
					this.tabs_list[v.status].monitro_list.push(v)
				})
				this.tabs_list.map(v => {
					v.name = v.name + ' ' + v.monitro_list.length
				})
				
				setTimeout(res => {
					uni.stopPullDownRefresh();
				}, 1000);

			},
			toUrl(item){
				uni.navigateTo({
					url: './mode/mode?name='+item.name
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabs-top{
		width: 100%;
		position: fixed;
		background-color: $u-page-bg-color;
		z-index: 10;
		// top: 80rpx;
	}
	.empty-mo{
		padding-top: 200rpx;
	}
	.monitro-list {
		width: calc(100% - 80rpx);
		margin: 0 auto;
		padding-top: 110rpx;
		.monitro-item {
			width: 100%;
			padding: 10rpx 0;
			border-radius: 8rpx;
			height: 110rpx;
			margin-bottom: 24rpx;
			background-color: #2A2D32;
			padding-top: 20rpx;

			.monitro-icon {
				width: 100rpx;
				padding-left: 30rpx;
				image {
					width: 100rpx;
				}
			}

			.monitro-con {
				width: calc(100% - 300rpx);
				padding-left: 24rpx;

				.monitro-name {
					width: 100%;
					color: #fff;
					font-size: 32rpx;
				}

				.monitro-status {
					color: #989A9C;
					margin-top: 6px;
					font-size: 14px;
					line-height: 16px;

					.text-status {
						border-radius: 2px;
						padding: 2px 4px;
						font-size: 12px;
						line-height: 12px;
						margin-left: 3px;
					}

					.text-status-gj {
						border: 1px solid #FA5151;
						color: #FA5151;
					}

					.text-status-zc {
						border: 1px solid #07C160;
						color: #07C160;
					}

					.text-status-lx {
						border: 1px solid #999999;
						color: #999999;
					}
				}
			}

			.monitro-num {
				text-align: center;
				padding-left: 10rpx;
				// width: 100rpx;

				.amount {
					color: #d5dbe1;

				}

				.text-name {
					font-size: 14px;
					color: #989A9C;
					margin-top: 14rpx;
				}
			}
		}
	}
</style>
